<!-- import textSwitch from "@/components/text-li-switch/text-li-switch.vue" -->
<!-- <textSwitch v-model="prop.must" uncheck_text="非必选" checked_text="必选" @change="switchChange"></textSwitch> -->
<!-- @change可以不写 -->


<template>
	<view>
		<view class="switch_box row-b-c"
			:style="{backgroundColor: checked?bg:'',width: width + 'rpx',height: height + 'rpx',borderRadius: '100px'}"
			@click="changeSwitch">
			<view class="switch_text c-white" :class="checked?['to_left']:['_right','c-black']"
				:style="{fontSize: size + 'rpx','padding-right':padding_right}">{{checked?checked_text:uncheck_text}}
			</view>
			<view class="round" :style="{left: checked?'100%':0,
		marginLeft:checked?'-' + (Number(height)) + 'rpx':'',width: + height + 'rpx',
		height: + height + 'rpx',
		borderRadius: height/2 + 'rpx'}">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['click', 'change', 'update:modelValue', 'input'],
		model: {
			prop: 'modelValue',
			event: 'update:modelValue'
		},

		props: {
			modelValue: [Boolean],
			bg: {
				type: String,
				default: '#0055ff'
			},
			width: {
				type: String,
				default: '66'
			},
			height: {
				type: String,
				default: '32'
			},
			uncheck_text: {
				type: String,
				default: ''
			},
			checked_text: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				default: '24'
			}
		},
		data() {
			return {
				checked: false,
				padding_right: '20rpx'
			}
		},
		created() {
			if (this.uncheck_text.length > this.checked_text.length) {
				this.padding_right = '10rpx'
			}
		},
		watch: {
			value:{
				handler(newVal) {
					
					this.checked = newVal;
				},
				deep: true,
				immediate: true
			},
			modelValue: {
				handler(newVal) {
					this.checked = newVal;
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			changeSwitch: function(e) {
				
				this.checked = !this.checked
				// TODO 兼容 vue2
				this.$emit('input', this.checked);
				// TODO　兼容　vue3
				this.$emit('update:modelValue', this.checked);

				this.$emit('change', {
					checked: this.checked
				})
			}
		}
	}
</script>

<style>
	.row-c-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.c-white {
		color: #FFFFFF;
	}

	.c-black {
		color: #666666;
	}


	/* ---------- */
	.switch_box {
		position: relative;
		border: 1rpx solid #EEEEEE;
		background-color: #cccccc;
		transition: all 0.4s;
		display: flex;
		align-items: center;
	}

	.round {
		position: absolute;
		background-color: #FFFFFF;
		transition: all 0.4s;
	}

	.to_left {
		left: 0;
		margin-left: 0;
	}

	.to_right {
		left: 100%;
		margin-left: -50rpx;
	}

	.switch_text {
		position: absolute;
		padding: 0 20rpx;
	}

	._right {
		right: 0;
		border-right: none !important;
	}
</style>
